<template>
  <el-dialog
    title="打印"
    width="1344px"
    :visible.sync="dialogVisible"
    class="view-dialog-container"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    v-loading="printLoading"
    @close="$emit('close')">
    <div class="content-box">
      <div id="content-box-show">
        <div v-for="(item, idx) in hasHandleAry" :key="idx" class="page">
          <div v-for="subItem of item" :key="subItem.id" class="receipt-box">
            <div class="title">宇宙银行财务支取回单</div>
            <div class="sub-title">
              <div>交易日期：2020年07月01日</div>
              <div>回单编号：20200710300100001136</div>
            </div>
            <div class="desc-info">
              <div class="desc-info-item">
                <div class="label">账号</div>
                <div class="content">{{ subItem.accountNo || '--' }}</div>
              </div>
              <div class="desc-info-item">
                <div class="label">户名</div>
                <div class="content">{{ subItem.accountName || '--' }}</div>
              </div>
              <div class="desc-info-item">
                <div class="label">开户银行</div>
                <div class="content">{{ subItem.openBankName || '--' }}</div>
              </div>
              <div class="desc-info-item">
                <div class="label">交易金额</div>
                <div class="content">{{ subItem.transAmt || '--' }}</div>
              </div>
              <div class="desc-info-item">
                <div class="label">回单种类</div>
                <div class="content">{{ subItem.receiptType || '--' }}</div>
                <div class="label sub-label">交易渠道</div>
                <div class="content">{{ subItem.transChannel || '--' }}</div>
              </div>
              <div class="desc-info-item">
                <div class="label">业务种类</div>
                <div class="content">{{ subItem.businessType || '--' }}</div>
                <div class="label sub-label">交易流水</div>
                <div class="content">{{ subItem.transSerial || '--' }}</div>
              </div>
              <div class="desc-info-item">
                <div class="label">
                  <img :src="sealImg" class="seal-img" alt="" />
                </div>
                <div class="content">
                  <div>付款人账号：{{ subItem.payAccountNo || '--' }}</div>
                  <div>付款人名称：{{ subItem.payAccountName || '--' }}</div>
                  <div>付款人开户行：{{ subItem.payOpenBankName || '--' }}</div>
                </div>
              </div>
            </div>
            <div class="desc-box">
              <div>打印方式：网银</div>
              <div >打印时间：{{ printTime }}</div>
              <div>本次打印次数：2</div>
              <div>请勿重复记账</div>
            </div>
            <div class="desc-box">
              <div>交易网点：海曙支行营业部</div>
              <div>操作员：测试</div>
            </div>
          </div>
        </div>
      </div>
      <div id="content-box-print">
        <div id="print-area" :style="{ width: realPrintWidth }">
          <div v-for="(item, idx) in hasHandleAry" :key="idx" class="page">
            <div
              v-for="subItem of item"
              :key="subItem.id"
              :class="['receipt-box', `receipt-box-${maxPageNum}`]">
              <div class="sub-item-box">
                <div class="title">宇宙银行财务支取回单</div>
                <div class="sub-title">
                  <div>交易日期：2020年07月01日</div>
                  <div>回单编号：20200710300100001136</div>
                </div>
                <div class="desc-info">
                  <div class="desc-info-item">
                    <div class="label">账号</div>
                    <div class="content">{{ subItem.accountNo || '--' }}</div>
                  </div>
                  <div class="desc-info-item">
                    <div class="label">户名</div>
                    <div class="content">{{ subItem.accountName || '--' }}</div>
                  </div>
                  <div class="desc-info-item">
                    <div class="label">开户银行</div>
                    <div class="content">
                      {{ subItem.openBankName || '--' }}
                    </div>
                  </div>
                  <div class="desc-info-item">
                    <div class="label">交易金额</div>
                    <div class="content">{{ subItem.transAmt || '--' }}</div>
                  </div>
                  <div class="desc-info-item">
                    <div class="label">回单种类</div>
                    <div class="content">{{ subItem.receiptType || '--' }}</div>
                    <div class="label sub-label">交易渠道</div>
                    <div class="content">
                      {{ subItem.transChannel || '--' }}
                    </div>
                  </div>
                  <div class="desc-info-item">
                    <div class="label">业务种类</div>
                    <div class="content">
                      {{ subItem.businessType || '--' }}
                    </div>
                    <div class="label sub-label">交易流水</div>
                    <div class="content">{{ subItem.transSerial || '--' }}</div>
                  </div>
                  <div class="desc-info-item">
                    <div class="label">
                      <img :src="sealImg" class="seal-img" alt="" />
                    </div>
                    <div class="content">
                      <div>付款人账号：{{ subItem.payAccountNo || '--' }}</div>
                      <div>
                        付款人名称：{{ subItem.payAccountName || '--' }}
                      </div>
                      <div>
                        付款人开户行：{{ subItem.payOpenBankName || '--' }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="desc-box">
                  <div>打印方式：网银</div>
                  <div class="time-box">打印时间：{{ printTime }}</div>
                  <div>本次打印次数：2</div>
                  <div>请勿重复记账</div>
                </div>
                <div class="desc-box">
                  <div>交易网点：海曙支行营业部</div>
                  <div>操作员：测试</div>
                </div>
              </div>
            </div>
            <div class="page-footer">
              第{{ idx + 1 }}页，共{{ hasHandleAry.length }}页
            </div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer-box">
      <div class="set-box">
        <el-form v-model="setForm" inline>
          <el-form-item label="是否打印装订区">
            <el-radio-group v-model="setForm.bindArea">
              <el-radio label="15mm">是</el-radio>
              <el-radio label="10mm">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="纸张尺寸">
            <el-select v-model="setForm.paperSize">
              <el-option
                v-for="item in paperSizeOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="每页打印张数">
            <el-select v-model="setForm.pageSize">
              <el-option
                v-for="item in pageSizeOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向">
            <el-select v-model="setForm.direction">
              <el-option
                v-for="item in directionOptions"
                :label="item.label"
                :value="item.value"
                :key="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn-box">
        <el-button @click="$emit('close')">取消</el-button>
        <!-- <el-button type="primary" v-print="printConfig">打印</el-button> -->
        <el-button type="primary" @click="printFn">打印</el-button>
        <el-button v-show="false" ref="printBtn" type="primary" v-print="printConfig"></el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import print from 'vue-print-nb';
import dayjs from 'dayjs';
import { twoDimensionalAry } from '../utils';
export default {
  directives: {
    print
  },
  props: {
    selectedList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      printLoading: false,
      sealImg: require('./seal.jpg'),
      printTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      printConfig: {
        id: 'content-box-print',
        popTitle: '',
        extraCss: '',
        extraHead: `<style>
          @page {
            size: A4 portrait;
            margin: 0 10mm 0 15mm;
          }
        </style>`,
        beforeOpenCallback: instance => {
          console.log(
            '打印样式==>',
            instance.printConfig.extraHead,
            instance.realPrintWidth
          );
          // 这里修改打印时间，是截取之前的，也就是dom还没有更新完，打印就启动了，还是旧时间
          instance.printLoading = true;
        },
        openCallback: instance => {
          instance.printLoading = false;
        },
        closeCallback: () => {
          console.log('关闭了打印工具');
        }
      },
      setForm: {
        bindArea: '15mm',
        paperSize: 'A4',
        pageSize: 3,
        direction: 'portrait'
      },
      maxPageSize: 0,
      directionOptions: [
        {
          label: '纵向',
          value: 'portrait'
        },
        {
          label: '横向',
          value: 'landscape'
        }
      ],
      paperSizeOptions: [
        {
          label: 'A4',
          value: 'A4'
        },
        {
          label: 'A5',
          value: 'A5'
        }
      ],
      pageSizeOptions: [
        {
          label: '1',
          value: 1
        },
        {
          label: '2',
          value: 2
        },
        {
          label: '3',
          value: 3
        }
      ],
      hasHandleAry: []
    };
  },
  computed: {
    // 打印区域实际宽度
    realPrintWidth() {
      let width = '210mm';
      let { paperSize, direction } = this.setForm;
      if (paperSize === 'A5') {
        width = '210mm'; // A5时只有横向打印210mm
      } else {
        if (direction === 'portrait') {
          width = '210mm'; // A4纵向打印210mm
        } else {
          width = '297mm'; // A4横向打印297mm
        }
      }
      return width;
    },
    realPrintHeight() {
      let height = '297mm';
      let { paperSize, direction } = this.setForm;
      if (paperSize === 'A5') {
        height = '148mm'; // A5时只有横向打印148mm
      } else {
        if (direction === 'portrait') {
          height = '297mm'; // A4纵向打印297mm
        } else {
          height = '210mm'; // A4横向打印210mm
        }
      }
      return height;
    },
    maxPageNum() {
      return Math.min(this.maxPageSize, this.setForm.pageSize);
    }
  },
  watch: {
    setForm: {
      handler(val) {
        let { pageSize, paperSize } = val;
        if (paperSize === 'A5') {
          this.directionOptions = [
            {
              label: '横向',
              value: 'landscape'
            }
          ];
          this.pageSizeOptions = [
            {
              label: '1',
              value: 1
            }
          ];
          val.direction = 'landscape';
          val.pageSize = 1;
        } else {
          this.pageSizeOptions = [
            {
              label: '1',
              value: 1
            },
            {
              label: '2',
              value: 2
            },
            {
              label: '3',
              value: 3
            }
          ];
          if (pageSize > 1) {
            this.directionOptions = [
              {
                label: '纵向',
                value: 'portrait'
              }
            ];
            val.direction = 'portrait';
          } else {
            this.directionOptions = [
              {
                label: '纵向',
                value: 'portrait'
              },
              {
                label: '横向',
                value: 'landscape'
              }
            ];
          }
        }
        this.printConfig.extraHead = this.getPrintConfig();
      },
      deep: true,
      immediate: true
    },
    'setForm.pageSize': {
      immediate: true,
      handler(newVal) {
        this.hasHandleAry = twoDimensionalAry(this.selectedList, newVal);
      }
    }
  },
  mounted() {
    this.maxPageSize = Math.min(this.selectedList.length, 3);
    this.dialogVisible = true;
  },
  methods: {
    getPrintConfig() {
      let { bindArea, direction, paperSize } = this.setForm;
      return `<style>
        @page {
          size: ${paperSize} ${direction} !important;
          margin: 0 10mm 0 ${bindArea} !important;
        }
      </style>`;
    },
    // 手动触发
    async printFn() {
      const clickEvent = new MouseEvent('click');
      this.printTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
      await this.$nextTick();
      this.$refs.printBtn.$el.dispatchEvent(clickEvent);
    }
  }
};
</script>

<style lang="scss" scoped>
.view-dialog-container {
  ::v-deep .el-dialog {
    .el-dialog__header {
      border-bottom: 1px solid #ddd;
    }
    .el-dialog__body {
      min-height: 300px;
      max-height: 430px;
      overflow-y: auto;
    }
    .el-dialog__footer {
      padding: 0 20px;
      border-top: 1px solid #ddd;
    }
  }
  .dialog-footer-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    .set-box {
      margin-top: 20px;
    }
  }
  .content-box {
    #content-box-show {
      .page {
        .title {
          text-align: center;
          font-size: 20px;
          font-weight: bold;
          margin: 16px 0;
        }
        .sub-title {
          font-size: 16px;
          display: flex;
          align-items: center;
          font-weight: bold;
          margin-bottom: 8px;
          & > div {
            flex: 1;
          }
        }
        .desc-info {
          border: 1px solid #999;
          margin-bottom: 16px;
          color: #333;
          .desc-info-item {
            border-bottom: 1px solid #999;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            line-height: 16px;
            .label {
              width: 210px;
              padding: 12px 0;
              box-sizing: border-box;
              display: flex;
              justify-content: center;
              align-items: center;
              border-right: 1px solid #999;
              .seal-img {
                width: 112px;
                height: 112px;
              }
            }
            .sub-label {
              border-left: 1px solid #999;
            }
            .content {
              flex: 1;
              padding: 12px 16px;
              display: flex;
              align-items: center;
            }
            &:last-child {
              border-bottom: none;
              height: auto;
              .content {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;
                & > div {
                  margin: 5px 0;
                }
              }
            }
          }
        }
        .desc-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
        }
      }
    }
    #content-box-print {
      width: 100%;
      display: flex;
      justify-content: center;
      #print-area {
        position: absolute;
        top: 0;
        left: -9999999px;
        font-size: 14px;
        box-sizing: border-box;
        border: 1px solid red;
      }
    }
  }
}
</style>

<style lang="scss">
// 打印样式
@media print {
  @page {
    marks: none !important;
    @bottom-center {
      content: '';
    }
  }
  body {
    margin: 0 !important;
    padding: 0 !important;
  }
  .page {
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    page-break-after: always; // 在每一个.page类名后面分页，后续内容在下一页
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    font-size: 14px;
    .receipt-box {
      width: 100%;
      margin-bottom: 6px;
      min-height: calc(33.33% - 24px);
      box-sizing: border-box;
      page-break-inside: avoid;
      break-inside: avoid;
      display: flex;
      align-items: center;
      border: 1px solid transparent; // 防止边框消失
      &-1 {
        min-height: calc(100% - 24px);
      }
      &-2 {
        min-height: calc(50% - 24px);
      }
      .sub-item-box {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        border-bottom: 1px dotted #999;
        .title {
          text-align: center;
          font-size: 16px;
          line-height: 16px;
          font-weight: bold;
          margin-top: 6px;
        }
        .sub-title {
          font-size: 16px;
          display: flex;
          font-weight: bold;
          margin: 3px 0;
          & > div {
            flex: 1;
          }
        }
        .desc-info {
          border: 1px solid #999;
          box-sizing: border-box;
          margin-bottom: 6px;
          color: #333;
          .desc-info-item {
            border-bottom: 1px solid #999;
            box-sizing: border-box;
            display: flex;
            font-size: 12px;
            line-height: 12px;
            .label {
              width: 80px;
              padding: 5px 0;
              display: flex;
              justify-content: center;
              align-items: center;
              border-right: 1px solid #999;
              box-sizing: border-box;
              .seal-img {
                width: 60px;
                height: 60px;
              }
            }
            .sub-label {
              border-left: 1px solid #999;
              box-sizing: border-box;
            }
            .content {
              flex: 1;
              padding: 5px 8px;
              display: flex;
              align-items: center;
            }
            &:last-child {
              border-bottom: none;
              height: auto;
              .content {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: flex-start;
                & > div {
                  margin: 5px 0;
                }
              }
            }
          }
        }
        .desc-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 6px;
        }
      }
    }
    .page-footer {
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 2mm;
      font-size: 12px;
    }
    &:last-child {
      page-break-after: avoid;
      break-after: avoid;
    }
  }
}
</style>
